<template>
  <div style="width:100%;height:100%;overflow:hidden">
    <weui-input :list="input_0_list" title="" more_label="" :tips="null" agreement_name=""
                @on-button="on_input_0_button">
      <weui-button slot="button" type="primary" :is_disable="button_0_is_disable" @on-click="on_button_0_click">{{button_0_label}}</weui-button>
    </weui-input>
  </div>
</template>

<script>
  import WeuiInput from '../vue2componentSet/src/components/WeuiInput'
  import WeuiButton from '../vue2componentSet/src/components/WeuiButton'
  import global from '../lib/global'
  import axios from 'axios'

  export default {
    components: {
      WeuiInput,
      WeuiButton
    },
    props : {
      title: {
        default: '绑定支付宝'
      }
    },
    data() {
      return {
        input_0_list: [{
          label: '支付宝',
          value: ''
        }, {
          label: '验证码',
          value: '',
          type: 'tel',
          button: '获取'
        }],
        button_0_label: '绑定',
      }
    },
    mounted() {
      this.$store.commit('set_title', this.title)

      if (!this.$store.state.customer) {
        this.$store.commit('login_dialog', {
          is_show: true,
          resolve: () => {
            this.$router.push('/bindAlipay')
          }
        })
        this.$router.goback()
        return
      }

      axios.post(global.server + 'getAlipay.do', {}).then(result => {
        var obj = result.data
        if (obj.alipay) {
          this.input_0_list = [{
            label: '支付宝',
            value: obj.alipay,
            readonly: true
          }]
          this.button_0_label = '修改'
          this.$store.commit('customer_login', {
            phone: this.$store.state.customer.phone,
            alipay: obj.alipay
          })
        }
      }, result => {
        console.log(result)
      })
    },
    methods: {
      on_button_0_click() {
        if (this.button_0_label == '绑定') {
          if (this.button_0_is_disable) {
            return
          }
          axios.post(global.server + 'setAlipay.do', {
            alipay: this.input_0_list[0].value,
            code: this.input_0_list[1].value,
          }).then(result => {
            var obj = result.data
            if (obj.result == 1) {
              this.input_0_list = [{
                label: '支付宝',
                value: this.input_0_list[0].value,
                readonly: true
              }]
              this.button_0_label = '修改'
              this.$store.commit('toast', {
                type: 'success',
                content: '绑定支付宝成功'
              })
              this.$store.commit('customer_login', {
                phone: this.$store.state.customer.phone,
                alipay: this.input_0_list[0].value
              })
            } else if (obj.result == 0) {
              this.$store.commit('customer_login', null)
              this.$store.commit('login_dialog', {
                is_show: true,
                resolve: () => {
                  this.on_button_0_click()
                }
              })
            } else {
              this.$store.commit('toast', {
                type: 'warn',
                content: obj.msg
              })
            }
          }, result => {
            console.log(result)
          })
        } else if (this.button_0_label == '修改') {
          this.input_0_list = [{
            label: '支付宝',
            value: this.input_0_list[0].value
          }, {
            label: '验证码',
            value: '',
            type: 'tel',
            button: '获取'
          }]
          this.button_0_label = '绑定'
        }
      },
      on_input_0_button(index) {
        if (index == 1) {
          if (this.$store.state.code_countdown != 0)
            return
          axios.post(global.server + 'getCode.do', {
            phone: this.$store.state.customer.phone
          }).then(result => {
            var obj = result.data
            if (obj.result == 1) {
              this.$store.commit('code_countdown')
            }
          }, result => {
            console.log(result)
          })
        }
      }
    },
    computed: {
      button_0_is_disable() {
        var is_disable = false
        this.input_0_list.forEach(item => {
          is_disable = is_disable || !item.value
        })
        return is_disable
      },
      code_countdown() {
        return this.$store.state.code_countdown
      }
    },
    watch: {
      code_countdown(value) {
        if (this.input_0_list.length < 2)
          return
        if (value == 0)
          this.$set(this.input_0_list[1], 'button', '获取')
        else
          this.$set(this.input_0_list[1], 'button', value)
      },
    },
  }
</script>
